<template>
  <div class="container">
    <!-- <div class="operation-panel">
      <div>
        <el-card :body-style="{ padding: '20px 15px !important' }">
          <div class="operation-item" @click="openUpload">
            <div>
              <el-icon>
                <UploadFilled />
              </el-icon>
            </div>
            <span>上传</span>
          </div>
          <div class="operation-item" @click="openQuery">
            <div>
              <svg-icon icon-class="search"></svg-icon>
            </div>
            <span>查询</span>
          </div>
        </el-card>
      </div>
    </div> -->
    <!-- 地图 -->
    <DataManageMap v-if="completeRefreshIndexMap" :allListData="allListData"
      :iServerIdList="iServerIdList" :iServerName="iServerName"
      @uploadFile="openUpload" @selectData="openQuery"
      @getDetailListByCode="getDetailListByCode" />
    <UploadDialog ref="uploadRef" v-model:open="uploadOpen" />
    <QueryDialog ref="queryRef" v-model:open="queryOpen" @selectIServerId="selectIServerId" />
  </div>
</template>
<script setup>
import UploadDialog from '@/views/quickMapping/dataManage/components/uploadDialog.vue'
import QueryDialog from '@/views/quickMapping/dataManage/components/queryDialog.vue'
import DataManageMap from '@/map/dataManageMap.vue';

const { proxy } = getCurrentInstance()
// 地图
const completeRefreshIndexMap = ref(false);//防止刷新后地图不显示
const allListData = ref([]);
const showTableBool = ref(false);//是否显示表格
const tempTableListData = ref([]);//根据行政区划代码查询活动数据列表
//根据行政区划代码查询活动数据列表
const getDetailListByCode = (code)=>{
  let array = [];
  let list = allListData.value;
  if(list!=null && list.length>0){
    for(let i=0;i<list.length;i++){
      if(list[i].iaCode==code){
        array.push(list[i]);
      }
    }
  }
  tempTableListData.value = array;
  showTableBool.value = true;
}
const uploadOpen = ref(false)
const queryOpen = ref(false)
const openUpload = () => {
  uploadOpen.value = true
  proxy.$refs.queryRef.isShowList = false
}
const iServerName = ref('')
const iServerIdList = ref([])
const selectIServerId = (obj) => {
  iServerName.value = obj.tableName
  iServerIdList.value = obj.list
}
const openQuery = () => {
  queryOpen.value = true
  proxy.$refs.uploadRef.isShowList = false
}
defineExpose({
  completeRefreshIndexMap
})
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 100%;

  .operation-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    font-weight: bold;

    .el-card {
      width: fit-content;
    }

    .queryFormCard {
      position: absolute;
      top: 0;
      left: 70px;
      width: max-content;
    }

    .operation-item {
      text-align: center;
      cursor: pointer;

      &>div {
        transform: scale(1.2);
        margin: 0 0 5px 0;
      }
    }

    .data-range {
      .el-select {
        width: 140px;
      }
    }

    .el-select:not(:last-child) {
      margin-right: 10px;
    }

    .operation-item:not(:last-child) {
      margin-bottom: 20px;
    }
  }
}
</style>